<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="btn1">存储数据</button>
    <button class="btn2">获取数据</button>
    <button class="btn3">删除数据</button>
    <button class="btn4">删除所有数据</button>
    <script>
        // sessionstroage 和 localstorage的操作是一样的。
        // sessionstroage 的有效期是在浏览器关闭之后自动销毁，但是localstoage不会自己销毁。
        document.querySelector('.btn1').onclick = function () {
            sessionStorage.setItem("myitem", 'hzh happy forever')
            sessionStorage.setItem("myitem2", 'clh healty forever')
            let data = { name: 'hzh', gender: 'male' }
            // localStorage.setItem("myitem3",data)//[object,object]
            // localStorage.setItem("myitem3",data.toString())//[object,object]
            sessionStorage.setItem('myitem3', JSON.stringify(data))//转换成json格式再存储
        }
        document.querySelector('.btn2').onclick = function () {
            console.log(sessionStorage.getItem('myitem'));

            let localData = sessionStorage.getItem('myitem3')
            let item = JSON.parse(localData);
            console.log(localData, item) //{"name":"hzh","gender":"male"} {name: 'hzh', gender: 'male'}
        }
        document.querySelector('.btn3').onclick = function () {
            sessionStorage.removeItem("myitem")
        }
        document.querySelector('.btn4').onclick = function () {
            sessionStorage.clear()
        }
    </script>
</body>
</html>